<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<style type="text/css">
		html,body{
			height: 100%;
			color :#ffffff;
		}
		*{
			margin:0;
			padding:0;
		}
		#wrapper{
			width:100%;
			height:100%;
			background: #4c9cd4;
		}
		header{
			width: 100%;
			height:180px;
			padding-left:100px;
			background: #73d1fa;
		}
		.city{
			margin: 30px;
			font-size: 60px;
			display:inline-block;
		}
		input::-webkit-input-placeholder{
			color:#4c9cd4;
			font-weight: 500; 
		}
		input{
			width: 150px;
			height:30px;
			color:#4c9cd4;
			font-weight: 600;
			border: 1px solid #ffffff;
			padding-left:34px;
			border-radius: 5%;
			background:#ffffff url(搜索.svg) 0 0 no-repeat;
			background-size: 30px 30px;
		}
		.container{
			padding-top: 50px;
			padding-left: 70px;
		}
		ul{
			width:12.5%;
			display: inline-block;
			text-align: center;
			border-right : 2px solid #ffffff;
		}
		ul:last-child{
			border-style: none;
		}
		li{
			width:130px;
			height:50px;
			display: inline-block;
			list-style: none;
			line-height: 50px;
			text-align: center;
			padding: 0 10px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<header>
			<div class="city">{{cityObj.name}}</div>
			<input v-model="cityName" @keyDown.enter="changeData" type="text" name="" placeholder="您的城市">
		</header>
		<div class="container">
		<ul>
			<img :src="`http://openweathermap.org/img/w/${iconArr[0]}.png`">
			<li v-for="item in dataStore[0]">
				{{item}}
			</li>
		</ul>
		<ul>
			<img :src="`http://openweathermap.org/img/w/${iconArr[1]}.png`">
			<li v-for="item in dataStore[1]">
				{{item}}
			</li>
		</ul>
		<ul>
			<img :src="`http://openweathermap.org/img/w/${iconArr[2]}.png`">
			<li v-for="item in dataStore[2]">
				{{item}}
			</li>
		</ul>
		<ul>
			<img :src="`http://openweathermap.org/img/w/${iconArr[3]}.png`">
			<li v-for="item in dataStore[3]">
				{{item}}
			</li>
		</ul>
		<ul>
			<img :src="`http://openweathermap.org/img/w/${iconArr[4]}.png`">
			<li v-for="item in dataStore[4]">
				{{item}}
			</li>
		</ul>
		<ul>
			<img :src="`http://openweathermap.org/img/w/${iconArr[5]}.png`">
			<li v-for="item in dataStore[5]">
				{{item}}
			</li>
		</ul>
		<ul>
			<img :src="`http://openweathermap.org/img/w/${iconArr[6]}.png`">
			<li v-for="item in dataStore[6]">
				{{item}}
			</li>
		</ul>
		</div>
	</div>
	<script type="text/javascript">
			 new Vue({
			el : '#wrapper',
			data : {
				iconArr : [],
				weatherArr : [],
				cityObj :{},
				cityName : 'beijing'
			},
			computed : {
				//数据处理提取
				dataStore : function (){
					var newWeatherArr= []
					for(var i=0;i<this.weatherArr.length;i++){
							var dataFork={}
							// dataFork.date
							var tempMin=''
							var tempMax=''
							// dataFork.city=this.cityObj.name
							dataFork.description=this.weatherArr[i].weather[0].description
							dataFork.tempDay=Math.round((this.weatherArr[i].temp.day-273.15))+'℃'
							tempMin=Math.round((this.weatherArr[i].temp.min-273.15))
							tempMax=Math.round((this.weatherArr[i].temp.max-273.15))
							dataFork.tempMinToMax=tempMin + '~' + tempMax+'℃'
							dataFork.speed='风速 : '+this.weatherArr[i].speed
							// dataFork.main=this.weatherArr[i].weather[0].main
							newWeatherArr.push(dataFork)
							this.iconArr.push(this.weatherArr[i].weather[0].icon)
					}	
					console.log(this.iconArr)
					console.log(newWeatherArr)
					return newWeatherArr
				},
				// iconStore : function(){
				// 	console.log(this.weatherArr)
				// 	for(var i=0;i<this.weatherArr.length;i++){
				// 		console.log(this.weatherArr[i].weather[0].icon)
				// 		// this.iconArr                                       .push()
				// 	}
				// 	console.log(this.iconArr)
				// }
			},
			created(){
				this.getData()
			},
			methods : {
				//天气数据请求
				getData :function (){
					var that = this;
					axios.get(`http://api.openweathermap.org/data/2.5/forecast/daily?q=${that.cityName}&appid=7c5219469d1d3aa869d2599559d26fc1&lang=zh_cn`)
  					.then(function (response) {
  						//城市信息
  						that.cityObj = response.data.city
  						//该城市的天气数据
  						that.weatherArr = response.data.list
  						that.cityName=''
  						console.log(that.cityObj)
  					}).catch(function (error) {console.log(error);});
  				},
  				changeData : function (){
  						this.getData()
  				}
  			}		
		
		});		
	</script>
</body>
</html>